import Qt 4.7
import "../Scrollable"
import "../AdaptiveSearch"

Row {
    id: rootView
    x: 0
    state: "list"

    property bool clickToCloseDetails: true
    property int contentAreaWidth: parent.width

    property variant model
    property alias delegate: listView.delegate

    function switchState() {
        if (state == "list") {
            state = "details"
        } else {
            state = "list"
        }
    }

    // Animate list state transition
    Behavior on x { NumberAnimation { duration: 200; easing.type: Easing.InOutCubic } }

    // The list itself
    ListView {
        id: listView
        width: contentAreaWidth

        model: rootView.model
        delegate: DetailListDelegate {}

        anchors.top: parent.top
        anchors.bottom: parent.bottom

        ScrollBar {
            flickable: listView
            vertical: true
        }

        AdaptiveSearch {
            id: adaptive
            anchors.fill: parent
            model: parent.model

            onFilterUpdated: {
                listView.model = adaptive.filtermodel
            }
        }
    }

    // Details-view
    Rectangle {
        id: detailView
        anchors.top: parent.top
        anchors.bottom: parent.bottom
        width: contentAreaWidth
        color: "white"

        Column {
            anchors.centerIn: parent
            spacing: 20
            Image {
                id: detailViewImage
                anchors.horizontalCenter: parent.horizontalCenter
            }

            Text {
                id: detailViewName
                anchors.horizontalCenter: parent.horizontalCenter
                horizontalAlignment: Qt.AlignHCenter
                font.pixelSize: 40
            }

            Text {
                id: detailViewNumber
                anchors.horizontalCenter: parent.horizontalCenter
                horizontalAlignment: Qt.AlignHCenter
                font.pixelSize: 40
            }
        }


        MouseArea {
            anchors.fill: parent
            // Switch back to list view
            onClicked: {
                if (clickToCloseDetails) {
                    switchState()
                }
            }
        }
    }

    states: [
        State {
            name: "list"
            PropertyChanges { target: detailListView; x: 0 }
        },
        State {
            name: "details"
            PropertyChanges { target: detailListView; x: -listView.width }
        }
    ]
}
